<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Elix PopupButton positions</title>

    <link rel="stylesheet" href="demos.css" />
    <script type="module" src="../define/PopupButton.js"></script>

    <style>
      html {
        height: 100%;
      }

      body {
        padding: 0;
      }
    </style>
  </head>

  <body role="main">
    <div class="demo fullScreen">
      <style>
        .buttonRow {
          padding: 1em;
        }

        .popup {
          align-items: center;
          border: 4px solid lightgray;
          box-sizing: border-box;
          display: flex;
          height: 200px;
          justify-content: center;
          padding: 1em;
          width: 300px;
        }

        .nowrap {
          white-space: nowrap;
        }

        .spreadOut {
          margin: 50vh 0;
        }
        .spreadOut + .spreadOut {
          margin-top: 0;
        }

        .right {
          float: right;
          right: 1em;
        }

        #bottom {
          background: #eee;
          bottom: 0;
          left: 0;
          position: fixed;
          right: 0;
        }
      </style>
      <div class="buttonRow">
        <elix-popup-button>
          <span slot="source">Open below left</span>
          <div class="popup nowrap">Here's a popup.</div>
        </elix-popup-button>
        <elix-popup-button popup-align="stretch">
          <span slot="source">Open below stretch</span>
          <div class="popup">Here's a popup.</div>
        </elix-popup-button>
        <elix-popup-button popup-align="right" class="right">
          <span slot="source">Open below right</span>
          <div class="popup nowrap">Here's a popup.</div>
        </elix-popup-button>
      </div>
      <div class="buttonRow" style="display: flex; flex-direction: row-reverse">
        <elix-popup-button>
          <span slot="source">Open below left</span>
          <div class="popup nowrap">Here's a popup.</div>
        </elix-popup-button>
        This wants to open left-aligned, but there's no room so will flip to
        right-align.
      </div>
      <div class="buttonRow">
        <p>
          These try to open above, but there's no room, so they'll open below.
        </p>
        <elix-popup-button popup-direction="above">
          <span slot="source">Open above</span>
          <div class="popup wide nowrap">Here's a popup.</div>
        </elix-popup-button>
        <elix-popup-button popup-direction="above" class="right">
          <span slot="source">Open above</span>
          <div class="popup wide nowrap">Here's a popup.</div>
        </elix-popup-button>
      </div>
      <div class="buttonRow spreadOut">
        <p>
          These prefer opening above, but will open below if there's more room.
        </p>
        <elix-popup-button popup-direction="above">
          <span slot="source">Open above left</span>
          <div class="popup nowrap">Here's a popup.</div>
        </elix-popup-button>
        <elix-popup-button popup-direction="above" popup-align="stretch">
          <span slot="source">Open above stretch</span>
          <div class="popup">Here's a popup.</div>
        </elix-popup-button>
        <elix-popup-button
          popup-direction="above"
          popup-align="right"
          class="right"
        >
          <span slot="source">Open above right</span>
          <div class="popup nowrap">Here's a popup.</div>
        </elix-popup-button>
      </div>
      <div class="buttonRow spreadOut">
        <p>
          This wants to open below, but will open above if there's more room.
        </p>
        <elix-popup-button>
          <span slot="source">Open below left</span>
          <div class="popup nowrap">Here's a popup.</div>
        </elix-popup-button>
      </div>
      <div class="buttonRow" id="bottom">
        <p style="font-size: smaller">
          These try to open below, but there's no room so will open above.
        </p>
        <elix-popup-button>
          <span slot="source">Open below</span>
          <div class="popup wide nowrap">Here's a popup.</div>
        </elix-popup-button>
        <elix-popup-button class="right">
          <span slot="source">Open below</span>
          <div class="popup wide nowrap">Here's a popup.</div>
        </elix-popup-button>
      </div>
    </div>
  </body>
</html>
